<script setup>
	import FirstTitle from "@comp/FirstTitle";
	import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue";
	import {
		onMounted
	} from "vue";

	import {
		searchDataQbxx
	} from "@/api/search";
	import {
		addOrUpdateQbxx
	} from "@/api/addOrUpdate";


	const city = window.globalObj.name;
	const editorRef = shallowRef();
	const editorRef1 = shallowRef();
	const editorRef2 = shallowRef();

	const toolbarConfig = {};
	const toolbarConfig1 = {};
	const toolbarConfig2 = {};
	const editorConfig = {
		placeholder: "请输入内容..."
	};
	const mode = ref("default");
	const mode1 = ref("default");
	const mode2 = ref("default");

	// 加载html
	const initHtml = () => {
		searchDataQbxx({
			m: "信息防护-基本防护手段"
		}).then((res) => {
			const {
				data
			} = res
			valueHtml.value = data.find((x) => x.k === "电子防护方法")?.v || "";
			valueHtml1.value = data.find((x) => x.k === "网络防护方法")?.v || "";
			valueHtml2.value = data.find((x) => x.k === "电磁频谱管理方法")?.v || "";
		})
	};


	const handleCreated = (editor) => {
		editorRef.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated1 = (editor) => {
		editorRef1.value = editor; // 记录 editor 实例，重要！
	};
	const handleCreated2 = (editor) => {
		editorRef2.value = editor; // 记录 editor 实例，重要！
	};

	const valueHtml = ref(
		"①区分优先等级，优先保障指挥信息网络、重要部门信息网络；②采取伪装、变形、遮障、烟幕和设置假信号发射源等方法手段，有效预防敌电子侦察；③定时组织无线电网静默，严格控制雷达开机和大功率电台发信时间，减小卫星过顶时的电磁辐射，降低敌卫星侦察效果；④备份各种重要通信设施和电源设备，确保在网络遭破坏时，保障指挥通信畅通。"
	);

	const valueHtml1 = ref(
		"①实行内网与外网独立建设，严格物理隔离；②平时和战时均按照“一备一用”的原则进行储备，准备多种预案抢修恢复；③战时采取加固、伪装、遮障、电子监测等方式进行防护，对人防专用光缆线路和交换设备进行重点监测防护；④突出保密防护和监测维护，预防木马病毒入侵。"
	)

	const valueHtml2 = ref(
		"①未经批准，严禁建立通信机站和使用无线通信设备；②建立战时电磁环境监测网，主要城区固定监测站、机动监测站联网，对区域内军警、人防使用的电磁频段实施全时监测和保护；③加强对敌特电台及干扰源等无线通信设备的频率侦察、清除；④采取技术手段对敌实施无线电干扰。"
	)


	const saveProgramme = () => {
		ElMessageBox.confirm(`确定要保存吗?`, "警告", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			customClass: "message-box",
		}).then(() => {
			addOrUpdateQbxx({
					m: "信息防护-基本防护手段",
					data: [{
							k: "电子防护方法",
							v: valueHtml.value,
						},
						{
							k: "网络防护方法",
							v: valueHtml1.value,
						},
						{
							k: "电磁频谱管理方法",
							v: valueHtml2.value,
						}
					],
				})
				.then((result) => {
					if (result.code === 200) {
						ElMessage.success("操作成功");
						initHtml();
					} else {
						ElMessage.error(result.msg);
					}
				})
				.catch(() => {});
		});
	}

	onMounted(() => {
		initHtml();

	});
	onBeforeUnmount(() => {
		const editor = editorRef.value;
		const editor1 = editorRef1.value;
		const editor2 = editorRef2.value;
		if (!editor) return;
		if (!editor1) return;
		if (!editor2) return;
		editor.destroy();
		editor1.destroy();
		editor2.destroy();
	});
</script>
<template>
	<div class="">
		<FirstTitle name="电子防护方法" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
				:mode="mode" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml" :defaultConfig="editorConfig"
				:mode="mode" @onCreated="handleCreated" />
		</div>

		<FirstTitle name="网络防护方法" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef1" :defaultConfig="toolbarConfig1"
				:mode="mode1" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml1" :defaultConfig="editorConfig"
				:mode="mode1" @onCreated="handleCreated1" />
		</div>

		<FirstTitle name="电磁频谱管理方法" class="top-15" />
		<div style="border: 1px solid #ccc" class="top-15">
			<Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef2" :defaultConfig="toolbarConfig1"
				:mode="mode2" />
			<Editor style="height: 500px; overflow-y: hidden" v-model="valueHtml2" :defaultConfig="editorConfig"
				:mode="mode2" @onCreated="handleCreated2" />
		</div>



		<div class="flex-justify-end top-20">
			<el-button type="primary" class="save-btn" @click="saveProgramme">保存</el-button>
		</div>
	</div>
</template>
<style scoped lang="scss"></style>